<template>
  <div>

    <to-back></to-back>
    <to-search></to-search>
    <div class="nav_sousuo">
      <van-search @keydown.enter="enter" v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <v-list :arr="list"></v-list>
  </div>
</template>

<script>
// import axios from "axios";
import { reqList } from "../../http/http.js";
export default {
  // 模拟数据
  data() {
    return {
      // 1.初始化空数组
      list: [],
      value:''
    };
  },
  methods:{
    enter(){
      this.$router.push('/search')
    }
  },
  // 一进来就要请求
  mounted() {
    /* 
    $route:当前的路由信息。获取数据
    $router:路由对象。 跳转路由
    */
    // console.log(this.$route);
    // console.log(this.$route.query);
    // console.log(this.$route.query.id);
    //以下发 ajax请求
    // 因为又来缓存，所以在走mounted,在activated
  },
  /* list页面，访问 “/list?id=1”和 “/list?id=2”页面不重复渲染，因为list组件被缓存了。
  我们希望上一次的id和这一次的id一样，
  就不请数据，不一样，要清数据。所以需要将请求的id存起来。 */
  activated() {
    console.log('===啦啦啦啦====');
    // 判断两次id是否一样
    if (this.oldid === this.$route.query.id) {
      // 上次和这一次一样，走缓存
      return;
    }
    // 不一样，重新请求,先清空数据
    this.list = [];

    // 将本次请求的id存起来
    this.oldid = this.$route.query.id;
    // 发请求
    reqList({
      cateid: this.$route.query.id,
      type: this.$route.query.type
    }).then(res => {
      // console.log(res);
      console.log('=========数据回来了========');
      //后端没有数据会返回null,但是我们希望是个数组，为了后期判断 “暂无数据”还是展示数据
      this.list = res.data.list.goodData ? res.data.list.goodData : [];
    });
  }
};
</script>

<style scoped>
</style>